<template>
  <div>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <!-- 搜索 -->
      <el-form-item label="题目">
        <el-input v-model="searchs" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
      </el-form-item>
      <el-form-item style="position: absolute; right: 100px;">
        <el-button type="primary" style="pa" @click="addhtml">新增</el-button>
      </el-form-item>
    </el-form>

    <!-- 信息列表 -->
    <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" @cell-click="celltable">
        <el-table-column label="题目" prop="title"> </el-table-column>
        <el-table-column label="答案" prop="answer"> </el-table-column>
        <el-table-column label="解析" prop="jiexi"> </el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button size="mini" @click="lookhtml">查看</el-button>
          <el-button size="mini" @click="edithtml">编辑</el-button>
          <el-button size="mini" type="danger" @click="deletehtml">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <div class="block" style="padding-top: 10px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]" layout="total,  prev, pager, next, jumper" :total="tableData.length">
        >
      </el-pagination>
    </div>

    <!-- 功能组件 -->
    <Addhtml :type="buttontype.addhtml" :fun="showbtn" tname="addhtml" :tablerow="tablerow"></Addhtml>
    <Lookhtml :type="buttontype.lookhtml" :fun="showbtn" tname="lookhtml" :tablerow="tablerow"></Lookhtml>
    <Edithtml :type="buttontype.edithtml" :fun="showbtn" tname="edithtml" :tablerow="tablerow"></Edithtml>
    <Deletehtml :type="buttontype.deletehtml" :fun="showbtn" tname="deletehtml" :tablerow="tablerow"></Deletehtml>
  </div>
</template>

<script>
import Addhtml from './Addhtml.vue'
import Edithtml from './Edithtml.vue'
import Deletehtml from './Deletehtml.vue'
import Lookhtml from './Lookhtml.vue'
export default {
  data () {
    return {
      searchs: '',
      currentPage: 1, // 初始页
      pagesize: 10, //    每页的数据
      tablerow: '', // 当前选中的用户
      buttontype: {
        // 功能模态框
        addhtml: false,
        edithtml: false,
        deletehtml: false,
        lookhtml: false
      },
      form: {
        title: '',
        answer: '',
        jiexi: ''
      },
      tableData: [
        {
          title: '题目题目题目题目11111111',
          answer: '答案答案答案 答案答案答案111',
          jiexi: '解析解析解析111'
        },
        {
          title: '题目题目题目题目22222222',
          answer: '答案答案答案 答案答案答案2222',
          jiexi: '解析解析解析2222'
        },
        {
          title: '题目题目题目题目333333',
          answer: '答案答案答案 答案答案答案333',
          jiexi: '解析解析解析333'
        }

      ]
    }
  },
  components: {
    Addhtml,
    Lookhtml,
    Edithtml,
    Deletehtml
  },
  methods: {
    search () {
      console.log(this.searchs)
      this.searchs = ''
    },
    // 当前选中的用户
    celltable (row) {
      this.tablerow = row
    },
    // 关闭模态框的状态
    showbtn (type) {
      this.buttontype[type] = false
    },
    // 开启新增学员模态框的状态
    addhtml () {
      this.buttontype.addhtml = true
    },
    // 开启查看学员信息模态框的状态
    lookhtml () {
      this.buttontype.lookhtml = true
    },
    // 开启修改学员信息模态框的状态
    edithtml () {
      this.buttontype.edithtml = true
    },
    // 开启删除学员信息模态框的状态
    deletehtml () {
      this.buttontype.deletehtml = true
      // console.log();
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size
      console.log(this.pagesize) // 每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
    }
  }
}
</script>

<style scoped="scoped">

</style>
